<template>
  <div class="form-container">
    <el-steps
      :active="active"
      finish-status="success"
      style="position: sticky; top: 0; z-index: 100; background: #f0f2f5"
    >
      <el-step title="设计表单"></el-step>
      <el-step title="选择配置"></el-step>
      <el-step title="投放展示"></el-step>
    </el-steps>
    <div v-if="active === 0">
      <fc-designer ref="designer">
        <template slot="handle">
          <ElButton
            class="el-button el-button--primary el-button--mini is-plain is-round"
            @click="getForm"
            ><i class="el-icon-check"></i> 完成</ElButton
          >
        </template>
      </fc-designer>
    </div>
    <div v-if="active === 1" style="margin-top: 20px">
      <el-row>
        <el-col>
          <el-card shadow="always">
            <div class="optionsTilteContainer">
              <i class="icon-shezhi1"></i>
              <span class="options-title">问卷设置</span>
            </div>
            <el-form
              ref="form"
              :rules="rules"
              :model="formOptions"
              label-width="160px"
              size="medium "
              style="margin-left: 25%; margin-right: 44%; margin-top: 30px"
            >
              <el-form-item label="表单背景">
                <el-select
                  v-model="formOptions.bgURL"
                  placeholder="请选择表单背景"
                  :style="tWidth"
                >
                  <el-option
                    v-for="(item, index) in theme"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="开始时间">
                <div class="block">
                  <el-date-picker
                    :style="tWidth"
                    v-model="formOptions.startTime"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="结束时间">
                <div class="block">
                  <el-date-picker
                    :style="tWidth"
                    v-model="formOptions.endTime"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>

              <el-form-item label="是否只允许填写一次">
                <el-switch v-model="formOptions.fillOne"></el-switch>
              </el-form-item>
              <el-form-item label="填写完毕后的跳转" prop="goToURL">
                <el-input
                  :style="tWidth"
                  v-model="formOptions.goToURL"
                ></el-input>
              </el-form-item>
              <el-form-item label="问卷名称">
                <el-input :style="tWidth" v-model="formOptions.name"></el-input>
              </el-form-item>
              <el-form-item label="是否处于发放状态">
                <el-switch v-model="formOptions.play"></el-switch>
              </el-form-item>
              <el-form-item label="问卷密码">
                <el-input
                  type="password"
                  :style="tWidth"
                  v-model="formOptions.pswd"
                ></el-input>
              </el-form-item>
              <el-form-item label="题目顺序是否随机">
                <el-switch v-model="formOptions.randomEcho"></el-switch>
              </el-form-item>
              <el-link
                style="margin-left: -230px; font-size: 12px"
                @click="goback"
              >
                <a class="el-icon-back"></a> 返回</el-link
              >
              <el-button
                type="primary"
                style="margin-left: 90%"
                @click="showReceiveFormVisible"
                >确认</el-button
              >
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div v-if="active === 2"></div>
    <!-- 开始回收的dialog -->
    <el-dialog title="提示" :visible.sync="receiveDialogVisible" width="30%">
      <span>确定要开始回收问卷吗？ </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="receiveDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="receiveFormHandle"
          :loading="receiveLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import NameWra from '@/components/form-components/NameWra'
import GenWra from '@/components/form-components/GenWra'
import BirWra from '@/components/form-components/BirWra'
import AgeWra from '@/components/form-components/AgeWra.js'
import TelWra from '@/components/form-components/TelWra'
import QQWra from '@/components/form-components/QQWra'
import EmaWra from '@/components/form-components/EmaWra'
import PasWra from '@/components/form-components/PasWra'
import JobWra from '@/components/form-components/JobWra'
import SchWra from '@/components/form-components/SchWra'
import XiWra from '@/components/form-components/XiWra'
import ClaWra from '@/components/form-components/ClaWra'
import NumWra from '@/components/form-components/NumWra'
import DegWra from '@/components/form-components/DegWrap'
import MajWra from '@/components/form-components/MajWra'

import putForm from './components/putForm'
import { theme } from '@/util/date'
import { getFormOptions, getFormJson } from '@/api/form'
export default {
  name: 'page1',
  computed: {
    theme() {
      return theme()
    }
  },
  data() {
    // 校验网址
    var validateURL = (rule, value, callback) => {

      if (this.formOptions.goToURL !== '') {
        var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
        if (!reg.test(this.formOptions.goToURL)) {
          callback(new Error('请输入正确的URL'))
        }
      }
      callback();
    };
    return {
      rules: {
        goToURL: [
          { validator: validateURL, trigger: 'blur' }
        ]
      },
      active: 0,
      // 表单json数据
      formJson: {},
      // 表单配置
      formOptions: {
        bgURL: '',
        startTime: new Date(),
        endTime: new Date((new Date()).getTime() + 24 * 60 * 60 * 1000),
        fillOne: false,
        goToURL: '',
        name: '',
        play: true,
        pswd: '',
        randomEcho: false,
        fid: null
      },
      // 控制回收问卷dialog的显示与隐藏
      receiveDialogVisible: false,
      receiveLoading: false,
      tWidth: 'width:250px'
    }
  },
  components: {
    putForm
  },
  mounted() {
    this.$refs.designer.addComponent(NameWra)
    this.$refs.designer.addComponent(GenWra)
    this.$refs.designer.addComponent(BirWra)
    this.$refs.designer.addComponent(AgeWra)
    this.$refs.designer.addComponent(TelWra)
    this.$refs.designer.addComponent(QQWra)
    this.$refs.designer.addComponent(EmaWra)
    this.$refs.designer.addComponent(PasWra)
    this.$refs.designer.addComponent(JobWra)
    this.$refs.designer.addComponent(SchWra)
    this.$refs.designer.addComponent(XiWra)
    this.$refs.designer.addComponent(ClaWra)
    this.$refs.designer.addComponent(NumWra)
    this.$refs.designer.addComponent(MajWra)
    this.$refs.designer.addComponent(DegWra)
    this.$refs.designer.addMenu({
      title: '常用问题',
      name: 'group1',
      list: [{
        icon: NameWra.icon,
        name: NameWra.name,
        label: NameWra.label
      },
      {
        icon: GenWra.icon,
        name: GenWra.name,
        label: GenWra.label
      },
      {
        icon: BirWra.icon,
        name: BirWra.name,
        label: BirWra.label
      },
      {
        icon: AgeWra.icon,
        name: AgeWra.name,
        label: AgeWra.label
      },
      {
        icon: TelWra.icon,
        name: TelWra.name,
        label: TelWra.label
      },
      {
        icon: QQWra.icon,
        name: QQWra.name,
        label: QQWra.label
      },
      {
        icon: EmaWra.icon,
        name: EmaWra.name,
        label: EmaWra.label
      },
      {
        icon: PasWra.icon,
        name: PasWra.name,
        label: PasWra.label
      },
      {
        icon: JobWra.icon,
        name: JobWra.name,
        label: JobWra.label
      },
      {
        icon: SchWra.icon,
        name: SchWra.name,
        label: SchWra.label
      },
      {
        icon: XiWra.icon,
        name: XiWra.name,
        label: XiWra.label
      },
      {
        icon: ClaWra.icon,
        name: ClaWra.name,
        label: ClaWra.label
      },
      {
        icon: NumWra.icon,
        name: NumWra.name,
        label: NumWra.label
      },
      {
        icon: DegWra.icon,
        name: DegWra.name,
        label: DegWra.label
      },
      {
        icon: MajWra.icon,
        name: MajWra.name,
        label: MajWra.label
      }
      ]
    });
  },
  methods: {
    getForm() {
      // 获得问卷json
      const FcDesignerRule = this.$refs.designer.getRule();
      this.formJson = FcDesignerRule
      console.log(this.formJson)
      // 进行下一步操作
      if (this.active++ > 2) this.active = 0;
    },
    // 返回上一步
    goback() {
      if (this.active-- < 0) this.active = 2
    },
    // 展示dialog
    showReceiveFormVisible() {
      this.receiveDialogVisible = true
    },
    // 提交json和表单配置
    async receiveFormHandle() {
      this.receiveLoading = true
      // 表单json
      const data2 = await getFormJson(this.formJson)
      console.log(data2)
      this.formOptions.fid = data2.data.data
      // 表单配置
      this.formOptions.endTime = this.formOptions.endTime.getTime()
      this.formOptions.startTime = this.formOptions.startTime.getTime()
      const data1 = await getFormOptions(this.formOptions)
      console.log(data1)
      this.receiveLoading = false
      this.receiveDialogVisible = false
      this.active = 2
      this.$router.push({ path: '/putForm/index', query: { id: data2.data.data } })
    }
  }
}
</script>

<style lang='scss' scoped>
.form-container {
  padding: 10px;
  .optionsTilteContainer {
    margin-left: 42%;
    margin-top: 20px;
    margin-bottom: 20px;
    .icon-shezhi1 {
      margin-right: 10px;
    }
    .options-title {
      font-size: 16px;
      font-weight: 700;
    }
  }
}
</style>
